{extend name="./app/admin/view/main.html" /}
{block name="title"}网站模板 - {__block__}{/block}
{block name="style"}
<style>
     .template-item {
        position: relative;
        margin-bottom: 10px;
    }
    .template-item img {
        width: 100%;
        height: auto;
        cursor: pointer;
    }
   .template-item .ivu-icon-checkmark-circled {
        position: absolute;
        top: 2px;
        right: 5px;
    }
    .template-item h4{
        margin-top: 10px;
        font-size: 18px;
        white-space: nowrap;
        overflow:hidden;
    }
     .template-item h4.p-1.selected a{
         color: #229922;
     }
    .fb-template-item-img-box .img-template-thumb{
        position:relative ;
        top:0px;
        transition:top 3s linear;
    }

</style>
{/block}

{block name="main"}
 
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">设置</h4> <h5 class="sub-title">网站模板</h5>
    </div>
    <a class="pull-right ivu-btn  ivu-btn-circle" href="http://www.pingbuwang.com">
        <span>更多模板</span>
    </a>

    <a class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle" style="margin-right: 20px" href="h">
        <span>上传新模板</span>
    </a>

</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 fb-template-item" v-for='item in templateList'>
            {{item.title}}
            <section class="mip-box">
                <section class="mip-box-body template-item" >
                    <div class="fb-template-item-icon-box"  v-if='item.fileName == currTemplate '>
                  <Icon class="fb-template-item-icon" type="md-checkmark-circle-outline" size='26'></Icon>
                    </div>
                  <div class="fb-template-item-img-box"><img @mouseenter="onEnterImg" @mouseleave="onLeaveImg" class="img-template-thumb" :src="item.pcThumb" @click='selectTemplate(item.fileName)'/></div>
                    <h4 :class="{'p-1':true,'selected':item.selected}"><a :href="'{$mipInfo.domain}/{$Think.config.admin}/setting/templateEdit/filename-'+item.fileName">{{item.info.title}}</a> </h4>
                </section>
            </section>
        </div>
    </div>
</main>
{/block}
    
{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            currTemplate: '{$mipInfo.template}',
            templateList: [],
        },
        watch: {

        },
        mounted() {
            this.getTemplateList();
        },
        methods: {
            getTemplateList() {
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/templateList', {
                }).then(function(res) {
                    if(res.code == 1) {
                        var templateList = res.data;
                        _this.templateList = templateList;
                    }
                });
            },
            selectTemplate(val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定切换成您选择的模板？</p>',
                    onOk: () => {
                        var _this = this;
                        this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/set_selected', {
                            fileName: val,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success('设置成功');
                                _this.currTemplate = val;
                            }
                        });
                    },
                    onCancel: () => {
                        //
                    }
                });
            },
            onEnterImg(evt){
                let imgHeight = evt.target.clientHeight ;
                let parentHeight = evt.target.parentElement.clientHeight;
                let h = imgHeight - parentHeight +50;
                evt.target.style.transitionDuration = ( h/150)+'s';
                evt.target.style.top=(-h)+'px';
            },
            onLeaveImg(evt){
                evt.target.style.top='0px';
            }


        }
    })
  </script>
{/block}